<template>
	<div class="relative-product">
		<ul>
			<li :style="{width: width+'px',height: height+'px'}" v-for='(product,index) in product_list' :key='product.id' v-if='!(index>=show_num)'>
				<router-link :to="'/product/'+product.id">
					<div class="product-info">
						<div class="img-container">
							<img :src="product.img"/>
						</div>
						<p>{{ product.name }}</p>
						<div class="relative-product-price">
							<div><label class="price-color">￥{{ product.product_list.sell_price[0] }}</label></div>
                            <p class="light-gray"><del>￥{{ product.product_list.market_price[0] }}</del></p>
						</div>
					</div>
				</router-link>
				<router-link v-show='product.hospital' to=''>
					<!-- <p class='hospital'>武汉中爱医疗美容整形</p> -->
				</router-link>
				<!-- <div class="relative-data" v-if='show_commont_count'>
					<div>
						<span>预约数：<span>{{ product.sale }}</span></span>
					</div>
					<div>
						<span>评论数：<span>{{ product.comments }}</span></span>
					</div>
				</div> -->
			</li>
		</ul>
		<!-- <not-found :isVisible='product_list.length<1'></not-found> -->
	</div>
</template>
<script type="text/javascript">
	// import NotFound from '@/components/NotFound';
	export default {
		props: {
			width: {
				default: 220,
				type: [String, Number]
			},
			height: {
				default: 300,
				type: [String, Number]
			},
			product_list: {
				type: Array
			},
			show_num: {
				type: Number
			},
			show_commont_count: {
				type: Boolean,
				default: true,
			},
		},
		components:{
			// NotFound,
		},
		methods: {
//			getMarketPrice(a,b){
//				return a?a:b
//			}
		}
	}
</script>
<style lang="less" scoped>
	.relative-product {
		@border-color: #e5e5e5;
		@gray-color: #272525;
		clear: both;
		ul {
			overflow: hidden;
			li {
				float: left;
				margin-bottom: 30px;
				// border: 1px solid @border-color;
				position:relative;
				&:last-child{
					margin-right: 0;
				}
				&:hover{
					// border:1px solid #85daef;
					.relative-data{
						background: #85daef;
						div{
							color: white;
						}				
					}
					
				}
				.product-info {
                    margin-right: 10px;
					.img-container{
						overflow: hidden;
						width: 100%;
						height: 214px;
					}
					img {
						width: 100%;
						/*height:px;*/
					}
					>p{
						font-size: 14px;
						display: -webkit-box;
						display: -moz-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;  
					}
				}
				.relative-product-price {
					overflow: hidden;
                    padding: 5px 0;
                    margin-top: 10px;
					div:first-child {
						float: left;
						label {
                            font-size: 16px;
                            vertical-align: bottom;
						}
                    }
                    p{
						float: right;
                        del{
                            font-size: 12px;    
                            vertical-align: bottom;
                        }
                    }

				}
				.hospital{
					font-size: 12px;
					color: #999;
					padding: 0 8px;
				}
				.relative-data{
					width: 100%;
					position: absolute;
					bottom: 0;
					line-height: 29px;
					border-top: 1px solid @border-color;
					font-size: 12px;
					overflow:hidden;
					span{
						color: inherit;
					}
					div{
						width: 50%;
						box-sizing: border-box;
						padding-left: 10px;
						float: left;
					}
					div:first-child{
						border-right: 1px solid @border-color;
					}
				}
			}
			li:last-child{
				margin-right: 0;
			}
		}

	}
</style>
